<template>
	<view class="pages">
		<view class="item u-border-bottom" @click="myMessages()">
			<view class="xtxx">
					<image src="../../static/xtxx.png" mode="scaleToFill"></image>
					<view class="riii">
						<view class="tit">
							<view class="titl" style="width: 240rpx;">系统消息</view>
							<view class="time" v-if='xiaoxicount!=0'>{{topDetailsList.data[0].createTime}}</view>
						</view>
						<view class="tit">
							<view class="ttt" v-if='xiaoxicount!=0'>您有新的消息，请注意查收！</view>
							<view class="wd" v-if='xiaoxicount!=0'>{{xiaoxicount}}</view>
						</view>
					</view>
			</view>
		</view>
		<view v-if="list.length>0">
			<u-swipe-action :show="item.show" :index="index"
				v-for="(item, index) in list" :key="item.id" 
				@click="click" @open="open"
				:options="options"
			>
			<navigator :url="`/pages/carCondition/carCondition?item=${encodeURIComponent(JSON.stringify(item))}`"
				hover-class="none">
				<view class="item u-border-bottom">
					<view class="aaaa">
							<image :src="item.images!='' ? https+item.images : '../../static/zwtp.jpg' " mode="scaleToFill"></image>
						<!-- <u-badge type="error" :count="item.weidu" class="badge" v-if="item.weidu!=0"></u-badge> -->
					</view>
					
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="riii">
						<view class="tit">
							<view class="titl">{{item.receiverName}}</view>
							<view class="time">{{item.dtime}}</view>
						</view>
						<view class="tit">
							<view class="ttt">{{item.info}}</view>
							<view class="wd" v-if="item.weidu!=0">{{item.weidu}}</view>
						</view>
					</view>
				</view>
			</navigator>
				
			</u-swipe-action>
		</view>
		<view v-else>
			<null></null>
		</view>
	</view>
</template>

<script>
	import API from "@/api/index.js"
	import API1 from "@/api/my.js"
	export default {
		data() {
			return {
				list: [
					
				],
				https: getApp().globalData.picturePath,
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				topDetailsList:'',
				xiaoxicount:0
			};
		},
		onLoad(){
			// this.getCarList();
			// this.messageAllRead();
		},
		onShow(){
			this.getCarList();
			this.messageAllRead();
			this.getAllweidu();
		},
	
		 onPullDownRefresh() {
			 let that = this;
		        console.log('refresh');
		        setTimeout(function () {
		            uni.stopPullDownRefresh();
					that.getCarList()
		        }, 1000);
		    },
		methods: {
			getAllweidu(){
				let that = this;
				that.xiaoxicount = 0;
				
				let token = uni.getStorage({
					token: token
				})
				API1.getAllMessageweidu(token).then(res=>{
					that.xiaoxicount = that.xiaoxicount+res.data;
				})
			},
			messageAllRead(){
				let token = uni.getStorage({
					token: token
				})
				API1.getMessageList({token}).then(res=>{
					console.log(res)
					this.topDetailsList = res;
					this.topDetailsList.data = this.topDetailsList.data.reverse()
				})
			},
			
			myMessages(){
				uni.navigateTo({
					url:'/pagesB/myMessage/myMessage'
				})
			},
			click(index, index1) {
				if(index1 == 1) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.list[index].show = false;
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			},
			
			//获取消息列表
			getCarList(num) {
				const data = {
				}
				API.getchatroom(data).then(res => {
					// console.log(res)
					this.list  = res.data
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.xtxx{
		display: flex;
	}
	
	
	
	
	
	
	
	.pages{
		min-height: 100vh;
		background: #fff;
	}
	.item {
		display: flex;
		padding: 23rpx 30rpx;
	}
	.aaaa{
		position: relative;
	}
	image {
		width: 100rpx;
		flex: 0 0 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 50%;
		
	}
	.badge{
		position: absolute;
		top: -30rpx;
		right:-10rpx ;
	}
	
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
	.tit{
		width:500rpx ;
		display: flex;
		justify-content: space-between;
		 
	}
	.titl{
		font-size: 32rpx;
		font-family: PingFangSC-Regular;
		color: #2C2C2C;
		width: 300rpx;
		overflow: hidden;/*超出部分隐藏*/
		           white-space: nowrap;/*不换行*/
		           text-overflow:ellipsis;/*超出部分文字以...显示*/
	}
	.ttt{
		margin-top: 20rpx;
		color: #999;
		font-size: 25rpx;
		width: 400rpx;
		overflow: hidden;/*超出部分隐藏*/
		           white-space: nowrap;/*不换行*/
		           text-overflow:ellipsis;/*超出部分文字以...显示*/
		
		
	}
	.wd{
		margin-top: 20rpx;
		font-size: 25rpx;
		color: #fff;
		background: #FD7E6E;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 50%;
	}
	.time{
		font-size: 24rpx;
		color: #999;
	}
	.riii{
		margin-left: 16rpx;
	}
</style>